<template>
    <transition name='up'>
        <footer class="component-footer-bar" v-show='showFooter'>
            <ul class="component-footer-bar__list">
                <li class="component-footer-bar__item" 
                    v-for='(item,index) in routerLinks'
                    @click="goRouter(item.name, item.text)" 
                    :class='{active: index == active}'>
                    <span class='component-footer-bar__img'>
                        <img :src='item.img' v-show='index != active'>
                        <img :src='item.imgActive' v-show='index == active'>
                    </span>
                    <p class="component-footer-bar__text">{{ item.text }}</p>
                </li>
            </ul>
        </footer>
    </transition>
</template>

<script>
    import { Promise } from 'es6-promise'
    import { allApi } from '../api/api'
    import  { mapGetters, mapActions }  from 'vuex'

    export default {
        props: {

        },
        data(){
            return {
                routerLinks:[{
                    name:'index',
                    text:'估价',
                    img:require('../images/tabbar_valuation-inactive@3x.png'),
                    imgActive:require('../images/tabbar_valuation-active@3x.png')
                }/*,{
                    name:'bill',
                    text:'订单',
                    img:require('../images/tabbar_order-inactive@3x.png'),
                    imgActive:require('../images/tabbar_order-active@3x.png')
                }*/],
                active:0,
                showFooter:false
            }
        },
        computed:{
            ...mapGetters([
                'msgTip',
                'localInfo',
            ]),
            userInfo(){
                return this.localInfo.userInfo
            },
            user(){
                return this.userInfo.user
            }
        },
        methods:{
            goRouter(name, text){
                allApi.log({
                    e_n:'c_tab',
                    e_v:{
                        value:this.$route.name
                    }
                })
                if(name == this.$route.name) return
                let i = 1
            
                this.$router.replace({
                    name:name
                })
            },
            init(){
                let links = this.routerLinks
                let isShow = false
                _.each(links,(value,index)=>{
                    if(value.name == this.$route.name || this.$route.name == 'default'){
                        this.active = index
                        isShow = true
                        return false
                    }
                })
                // console.log(isShow)
                this.showFooter = isShow
            },
        },
        created() {
            this.init()
        },
        watch: {
            $route (newVal,oldVal){
                this.init()
            }
        }
    }
</script>

<style lang="scss">
    @import "../sass/_variables";
    @import "../sass/_extends";
    @import "../sass/_mixins";

    .component-footer-bar{
        z-index:997;
        position: absolute;
        bottom:0;
        left:0;
        right:0;
        background: #FAFAFA;
        box-shadow: 0 0 8px 0 rgba(0,0,0,0.12), 0 8px 8px 0 rgba(0,0,0,0.24);
        padding-bottom: constant(safe-area-inset-bottom);
    }
    .component-footer-bar__list{
        display: flex;
    }
    .component-footer-bar__item{
        width: 15%;
        flex:1;
        text-align: center;
        padding: 8px 5px 6px 5px;
        &.active{
            .component-footer-bar__text{
                color:#FAAD14;
            }
        }
    }
    .component-footer-bar__img{
        display: block;
        width: 100%;
        height: 24px;
        text-align:center;
        img{
            width: 24px;
            height:24px;
        }
    }
    .component-footer-bar__text{
        padding-top: 6px;
        font-size: 12px;
    }

</style>
